<template>
  <div>
    {{ringDetail.userName}}
    {{ringDetail.ringDate}}
    {{ringDetail.content}}
    <div v-if="ringDetail.hasRed">
      <Card>
        共：{{redDetail.money}}
        {{redDetail.leftSize}}/{{redDetail.totalSize}}
        <Button @click="robMoney">抢红包</Button>
      </Card>
    </div>
    <div>
      <Row>
        <Col v-if="stared" @click="cancelStar">
          <Icon type="md-heart"/>
        </Col>
        <Col v-else @click="star">
          <Icon type="md-heart-outline"/>
        </Col>
        <Col>
          {{ringDetail.starNum}}
        </Col>
      </Row>

    </div>
    <Row v-for="(item,index) in ringDetail.commentList" v-bind:key="item.commentId">
      <div @click="comment(item.commentId,item.userName,item.userId)">
        <div v-if="item.commentName===''">
          <Row>
            <Col style="color: #2d8cf0">{{item.userName}}</Col>
            :{{item.content}}
          </Row>
        </div>
        <div v-else>
          <Row>
            <Col style="color: #2d8cf0">{{item.userName}}</Col>
            回复
            <Col style="color: #2d8cf0">{{item.commentName}}</Col>
            :{{item.content}}
          </Row>
        </div>
      </div>
      <div v-if="item.userId===userId">
        <Icon type="md-close" @click="deleteComment(index,item.commentId)"/>
      </div>
    </Row>
  </div>
  <Drawer :title="vueCommentName" placement="bottom" :closable="false" v-model="commentVisiable">
    <Form>
      <Input v-model="commentContent" type="textarea" :rows="4" placeholder="评论"/>
      <Button @click="postComment">发送</Button>
    </Form>
  </Drawer>
</template>

<script>
import axios from 'axios'
import user from '@/store/user'

export default {
  name: 'RingDetail',
  data() {
    return {
      userId: user.userId,
      ringId: this.$route.params.ringId,
      commentVisiable: false,
      commentContent: '',
      commentName: '',
      vueCommentName: 'SS',
      commentId: '',
      stared: false,
      ringDetail: {},
      redDetail: {
        ringId: 7,
        leftSize: 75,
        money: 45,
        totalSize: 57
      }
    }
  },

  created() {
    console.log(this.ringId)
    const self = this
    axios({
      method: 'get',
      url: `/ring/detail/${this.ringId}`
    }).then((result) => {
      console.log(result)
      self.ringDetail = result.data
    })
  },
  methods: {
    comment(commentId, userName, userId) {
      console.log(commentId)
      this.commentName = userName
      this.vueCommentName = `回复${userName}:`
      this.commentVisiable = true
      this.commentId = commentId
      this.targetUserId = userId
    },
    postComment() {
      const comment = {
        ringId: this.ringDetail.ringId,
        targetUserId: this.targetUserId,
        targetCommentId: this.commentId,
        content: this.commentContent
      }
      const vueComment = {
        commentName: this.commentName,
        userName: 'ss',
        content: this.commentContent
      }
      axios({
        method: 'post',
        url: '/ring/comment',
        data: comment
      }).then((result) => {
        console.log(result)
      })
      this.ringDetail.commentList.push(vueComment)
      this.commentContent = ''
      this.commentVisiable = false
    },
    robMoney() {
      axios({
        method: 'put',
        url: `/red/${this.ringId}`
      }).then((result) => {
        console.log(result)
      })
    },
    cancelStar() {
      this.stared = false
      this.ringDetail.starNum -= 1
      axios({
        method: 'post',
        url: `/ring/stars/${this.ringId}`
      }).then((result) => {
        console.log(result)
      })
    },
    star() {
      this.stared = true
      this.ringDetail.starNum += 1
      axios({
        method: 'delete',
        url: `/ring/stars/${this.ringId}`
      }).then((result) => {
        console.log(result)
      })
    },
    deleteComment(index, commentId) {
      console.log(index)
      console.log(commentId)
      this.ringDetail.commentList.splice(index, 1)
    }
  }

}
</script>

<style scoped>

</style>
